{% extends 'baseForIndexAndLearningPlanet.html' %}
{% load static %}
{% load cache %}
{% block title %}学习星球{% endblock %}
{% block keywords %}{{ blogTitle }}{% endblock %}


{% cache 60 'learn-cache' %}
    {% block left-content %}
        <link rel="stylesheet" href="{% static 'css/learningPlanet.css' %}">
        <link rel="stylesheet" href="{% static 'css/base.css' %}">

        {% comment %}代码高亮{% endcomment %}
        <link rel="stylesheet" href="https://cdn.bootcss.com/highlight.js/11.4.0/styles/googlecode.min.css">
        <script src="https://cdn.bootcss.com/highlight.js/11.4.0/highlight.min.js"></script>
        <script>hljs.initHighlightingOnLoad();</script>

        <div id="learn-content-le" class="container-fluid">
            {% comment %}显示当前位置{% endcomment %}
            <div id="nowLocation">
                当前位置: <strong><a href="#" id="categoryLocation" class="my-tag">{{ blogCategory }}</a></strong> >>
                <strong><a
                        href="{% url 'learningPlanet:index' blog_id=blog_id %}">{{ blogTitle }}</a></strong>
            </div>
            {% comment %}文章部分{% endcomment %}
            <div id="learn-blogContent">
                {% comment %}标题{% endcomment %}
                <h2 id="title"><strong>{{ blogTitle }}</strong></h2>
                {% comment %}文章相关信息{% endcomment %}
                <div id="article-detail">
                    <span>作者: <a href="#" id="{{ authorId }}" class="descUser">{{ authorName }}</a></span>
                    <span>浏览量:{{ blogTotalViews }}</span>
                    <span>发布时间:{{ blogCreatedTime }}</span>
                    <span>更新时间:{{ blogUpdatedTime }}</span>
                    {% for blogTag in blogTags %}
                        <span style="margin: 0;padding: 0;font-size: 10px;"><span class="iconfont"
                                                                                  style="font-size: 10px">&#xeabd;</span>{{ blogTag }}</span>
                    {% endfor %}
                    {% if isModify %}
                        <span id="modifyBlog"><a
                                href="{% url 'learningPlanet:modifyBlog' blog_id=blog_id author_id=authorId %} "><span
                                class="iconfont">&#xe700;</span>编辑原文</a></span>
                    {% else %}
                        <span id="modifyBlog" style="cursor: pointer"><span class="iconfont">&#xe700;</span>编辑原文</span>
                        <script>{% comment %}点击编辑原文{% endcomment %}
                        $('#modifyBlog').click(function () {
                            popMsg2(`对不起,没有权限.`);
                        });</script>
                    {% endif %}
                </div>
                <div id="div1" style="padding-left: 2%;padding-right: 2%;">{{ blogContent|safe }}</div>

                {% comment %}文章内容end{% endcomment %}
                {% comment %}文章收藏,点赞等{% endcomment %}
                <div id="blog-extend">
                    <span id="collect">
                        <span class="iconfont">&#xe86d;</span>&nbsp;收藏本文</span>
                    <span id="doCall"><span class="iconfont">&#xec7f;</span>&nbsp;<span
                            class="likeNum">{{ blogTotalLikes }}</span> </span>
                    {% comment %}评论{% endcomment %}
                    <div id="qq">
                        <p>有什么想对作者说的吗?</p>
                        <div class="message" contentEditable='true'></div>
                        <div class="But">
                            <span class='submit'>发表</span>

                        </div>
                    </div>
                    <!--qq end-->
                    <!--msgCon begin-->
                    <div class="msgCon"></div>

                    {% comment %}评论end{% endcomment %}
                </div>
            </div>
        </div>

        <script>
            {% comment %}收藏{% endcomment %}
            let collect = document.getElementById('collect');
            if ("{{ isCollected }}") { {% comment %}判断该文章是否已被当前用户收藏{% endcomment %}
                collect.className = 'collected';
                collect.innerHTML = `<span class="iconfont">&#xe86d;</span>&nbsp;已收藏`;
            } else {
                collect.className = 'collect';
                collect.innerHTML = `<span class="iconfont">&#xe86d;</span>&nbsp;收藏`;

            }
            {% comment %}点击收藏和取消收藏{% endcomment %}

            if ('{{ LoginStatus }}' === 'true') { {% comment %}登录之后才能进行收藏{% endcomment %}
                collect.onclick = function () {
                    if (collect.className.toLowerCase() === 'collected') {
                        $ajax('post', "{% url 'learningPlanet:collect' %}", {
                                'userId': "{{ userId }}",
                                'blogId': "{{ blog_id }}",
                                'isCollected': 0
                            },
                            function () {
                            },
                            function (msg) {
                                popMsg2(`${JSON.parse(msg)['msg']}`);
                            }
                        )
                        collect.innerHTML = `<span class="iconfont">&#xe86d;</span>&nbsp;收藏`;
                        collect.className = 'collect';
                        collect.style.backgroundColor = 'transparent';
                        collect.onmouseover = function () {
                            collect.style.backgroundColor = '#8fd19e';
                        }
                        collect.onmouseleave = function () {
                            collect.style.backgroundColor = 'transparent';
                        }

                    } else {
                        $ajax('post', "{% url 'learningPlanet:collect' %}", {
                                'userId': "{{ userId }}",
                                'blogId': "{{ blog_id }}",
                                'isCollected': 1
                            },
                            function () {
                            },
                            function (msg) {
                                popMsg2(`${msg + '失败'}`);
                            }
                        )


                        collect.className = 'collected';
                        collect.innerHTML = `<span class="iconfont">&#xe86d;</span>&nbsp;已收藏`;
                        collect.style.backgroundColor = '#8fd19e';
                        collect.onmouseover = function () {
                        }
                        collect.onmouseleave = function () {
                        }
                    }

                }
            } else {
                collect.onclick = function () {
                    popMsg2(`请先登录~`);
                }
            }

            {% comment %}评论{% endcomment %}
            $(function () {
                let msgBoxList = [];
                {% comment %}请求服务器获取对应的评论信息{% endcomment %}
                $ajax('post', "{% url 'learningPlanet:returnJudgeList' %}", {'blogId': '{{blog_id}}'},
                    function (msg) {
                        msgBoxList = JSON.parse(msg)['judgeList'];
                        innerHTMl(msgBoxList, false);
                        addDescTag();

                    },
                    function (msg) {
                    });

                {% comment %}点赞功能的实现{% endcomment %}
                let doCall = document.getElementById('doCall');
                doCall.onclick = function () {
                    let spanObj = doCall.getElementsByTagName('span')[1];
                    let spanClassName = spanObj.className;
                    let nowLikeNum = parseInt(spanObj.innerHTML);
                    if (spanClassName.toLowerCase() === 'likenum') {
                        $ajax('post', "{% url 'learningPlanet:doCall' %}", {
                            'blogId': '{{ blog_id }}', 'docall': 1,
                            'userId': '{{ userId }}'

                        });
                        {% comment %}获赞量加一{% endcomment %}
                        nowLikeNum += 1;
                        spanObj.innerHTML = nowLikeNum;
                        spanObj.className = 'notLike';
                        doCall.style.backgroundColor = '#8fd19e';
                        doCall.onmouseover = function () {
                        }
                        doCall.onmouseleave = function () {
                        }
                    }
                    if (spanClassName.toLowerCase() === 'notlike') {
                        $ajax('post', "{% url 'learningPlanet:doCall' %}",
                            {
                                'blogId': '{{ blog_id }}',
                                'docall': -1,
                                'userId': '{{ userId }}'

                            });
                        {% comment %}获赞量减一{% endcomment %}
                        nowLikeNum -= 1;
                        spanObj.innerHTML = nowLikeNum;
                        spanObj.className = 'likeNum';
                        doCall.style.backgroundColor = 'transparent';
                        doCall.onmouseover = function () {
                            doCall.style.backgroundColor = '#8fd19e';
                        }
                        doCall.onmouseleave = function () {
                            doCall.style.backgroundColor = 'transparent';
                        }
                    }
                }

                //点击发表按扭，发表内容
                $("span.submit").click(function () {
                    if ('{{ LoginStatus }}' === 'true') {
                        let txt = $(".message").html(); //获取输入框内容
                        if (!txt) {
                            $('.message').focus(); //自动获取焦点
                            return;
                        }

                        {% comment %}数据保存到服务器{% endcomment %}
                        $ajax('post', "{% url 'learningPlanet:addJudgeList' %}",
                            {
                                'judgerId': '{{ userId }}',
                                'blogId': '{{ blog_id }}',
                                'content': txt
                            },
                            function (msg) {
                                {% comment %}拿到该评论的id,以便用户需要删除该评论时用{% endcomment %}
                                let judgeId = JSON.parse(msg)['judgeId'];
                                let obj = {
                                    'name': '{{ userName }}',
                                    'avatar': '../{{ userAvatar }}',
                                    'date': NowTime(),
                                    'content': txt,
                                    'id': judgeId
                                };
                                innerHTMl([obj], true); //渲染当前输入框内容
                                $('.message').html(''); // 清空输入框
                                msgBoxList.unshift(obj); //添加到数组里
                                addDescTag();


                            },
                            function (msg) {
                                popMsg2(`${JSON.parse(msg)['msg']}`);
                            }
                        );
                    } else {
                        popMsg2(`请先登录!`);
                    }
                });


                //删除当前数据
                $("body").on('click', '.del', function () {
                    let index = $(this).parent().parent().index();
                    let judgeId = msgBoxList[0].id;
                    {% comment %}删除数据库中的数据{% endcomment %}
                    $ajax('post', "{% url 'learningPlanet:deleteJudgeList' %}", {'judgeId': judgeId},
                        function (msg) {
                        },
                        function (msg) {
                            popMsg2(`${JSON.parse(msg)['msg']}`);
                        }
                    );
                    {% comment %}删除页面上的数据{% endcomment %}
                    msgBoxList.splice(index, 1);
                    $(this).parent().parent().remove();
                })

                //渲染html
                function innerHTMl(List, isFabu) { {% comment %}如果当前时发布评论,则nowId=''{% endcomment %}
                    List = List || [];
                    List.forEach(item => {
                        if (isFabu) {
                            var nowId = '';

                        } else {
                            var nowId = item.judgerId.toString();
                        }
                        if ("{{ userId }}" === nowId || nowId === '') {

                            let str = `<div class='msgBox' id="${item.id}">
						<div class="headUrl">
							<img src='{% url 'app:index' %}${item.avatar}'   width='50' height='50'/>
							<div>
								<span class="title" style="color:deepskyblue;"><a href="#" class="descUser" id="{{ userId }}">${item.name}</a></span>
								<span class="time">${item.date}</span>
							</div>
  <a class="del">删除</a>
						</div>
						<div class='msgTxt'>
							${item.content}
						</div>
					</div>`;
                            $(".msgCon").prepend(str);
                        } else {
                            let str = `<div class='msgBox' id="${item.id}">
						<div class="headUrl">
							<img src='{% url 'app:index' %}${item.avatar}'   width='50' height='50'/>
							<div>
								<span class="title" style="color:deepskyblue;"><a href="#" class="descUser" id="${nowId}">${item.name}</a></span>
								<span class="time">${item.date}</span>
							</div>
							<a class="del" style="display: none;">删除</a>
						</div>
						<div class='msgTxt'>
							${item.content}
						</div>
					</div>`;
                            $(".msgCon").prepend(str);
                        }
                    });
                }
            });
        </script>
    {% endblock %}
{% endcache %}